<template>
    <div class="wrapper">
        <header :title="title" :back="back"></header>


<p class="title">录入新单词</p>
        <div class="section">
            <ul>
                <li>
                    <span>单词</span>
                    <input type="text" v-model="newWord.word"
                    placeholder="请输入一个单词" class="text1"/>
                </li>
                <li>
<span>发音</span><input type="text" v-model="newWord.pronounce"
placeholder="请输入此单词的发音" class="text1"/>
            
                </li>
                <li>
<span>中文</span><input type="text" v-model="newWord.description"
placeholder="请输入汉语意思" class="text1"/>
                </li>
            </ul>
        </div>
        <button v-on="click=addWord(newWord)" class="button1">确认添加</button>
    </div>

</template>

js


<script>
 import Header from "../header/header"
export default {
    name:'AddWord',
    components:{
        Header
    },
    data(){

        return{
            newWord:{
                word:'',
                pronounce:'',
                description:''
            },
            title:"添加新单词",
            back:"/words"
        }
    },
    methods:{
        addWord:function(newWord){
            console.log(newWord.word);
            if(newWord.word == ''){
                alert("输入的单词不能为空！");
            }else if(newWord.description == ''){
                alert("输入的中文意思不能空！");
            }else if(newWord.pronounce == ''){
                alert("输入的单词发音不能为空！");
            }else{
                this.$http.jsonp("http://app.sencha.com.cn/soya/apps/testdb/server/?action=wordList.insert&word="+newWord.word
                +"&pronounce="+newWord.pronounce+"&memberId=100&description="+newWord.description,{

                }).then(function(res){
                    console.log(res.data);
                    if(res.data.ret == 0){

                        alert("添加成功！");
                        this.$router.push({
                            path:"/words"
                        })
                    }else{
                        alert("添加失败！");
                    }
                },function(error){
                    console.log(error);
                
                });
            }
        }
    }
}
</script>

css

<style scoped>
    .wrapper{
        margin-top:55px;
        text-align: left; 
    }
    .title{
        padding-left:23px;
        margin-bottom: 10px;
        color: #999; 
    }
    .section{
        background: #ffffff;
        padding: 0 23px;
    }
    .section li{
        height: 55px;
        line-height: 55px;
        border-bottom: 1px #eee solid;
        font-size: 16px; 
    }
    .section input{
        border: none;
        margin-left: 16px;
        font-size: 14px;
    }.button1{
        border: 0;
        background: #41b883;
        border-radius: 3px;
        height: 42px;
        width: calc(100% - 66px);
        margin: 80% 30px 10% 33px;
        font-size: 16px;
        font-weight: bold;
        color:  #ffffff; 
    }
</style>